<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>say goodbye</title>
<style type="text/css" media="screen">
<!--
html,body{height:100%;margin:20px auto;font:12px/1.6em arial;color: #555;}
#map{width:600px;height:380px;margin:auto;border: 1px solid #369;}
#sss{padding:0 0 44px;color: #fff;width:150px;}
#sss p{margin:0;padding:23px 15px 0;text-align: center;}
.sd{background: url(bt.png) no-repeat bottom;}
.sd p{background: url(tp.png) no-repeat top;}
.sdo{background: url(bto.png) no-repeat bottom;}
.sdo p{background: url(tpo.png) no-repeat top;}
.soo{background: url(bto.png) no-repeat bottom;}
.soo p{background: url(tp.png) no-repeat top;}
-->
</style>

<script type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAACZoLVN79WT2mXp8M7Dsi-hSVbq8cAqMDJReYWuWY3FAJPhxoRBTRhRCgpQhnPbuLwfaAbgqLte5Baw" ></script>
<script type="text/javascript">
//<![CDATA[

window.onload  =function (){	load();	};
window.onunload=function (){	GUnload();	};

function load() {
  if (GBrowserIsCompatible()) {

 //creat GMap2
	var el = document.getElementById("map"),
		opts = {mapTypes:[G_SATELLITE_MAP]},
		map = new GMap2(el,opts),
		point = new GLatLng(40, 116.39285087585449);
		map.setCenter(point, 18);

//define data and input object
	var cts = {},
		ctl,
		timer,
		addn = 0;

//load data(json)
	GDownloadUrl("said.txt", function(data, responseCode) {
		cts = eval("(" + data + ")");
		ctl = cts["qoute"].length;

		function ctr(){
		 clearTimeout(timer);
		}

		//add GIcon
		function addIcon(){
		  var cItem = cts["qoute"][addn];
		  var ct = cItem.name,
			  lld = cItem.Glatlng.split(","),
			  icc,
			  cla,
			  cpoint = new GLatLng(lld[0],lld[1]);		

			var oIcon = new GIcon();
			if(addn===2){
				icc = 'bl.png';cla = "soo";
			}else if(addn%2==0){
				icc = 'bl.png';cla = "sd";
			}
			if(addn%2==1){
				icc = 'og.png';cla= "sdo";
			}
			oIcon.image = icc;
			oIcon.shadow = "";
			oIcon.iconSize = new GSize(26, 53);
			oIcon.shadowSize = new GSize(0, 0);
			oIcon.iconAnchor = new GPoint(-100, -84);
			oIcon.infoWindowAnchor = new GPoint(0, 0);
			var marker = new GMarker(cpoint,{icon:oIcon})
			map.clearOverlays();
			map.addOverlay(marker);

			map.panTo(cpoint);
			var ss = new tooltip(cpoint,'<div id="sss"><p>'+ct+'</p></div>',cla);
			map.addOverlay(ss);
			
			if(addn<ctl){
				addn++;
				timer = window.setTimeout(addIcon,5000)
			}
			if(addn===ctl){
				ctr();
				//addn=0;
			}
		}
		addIcon();
	});

  }
}
//marker pop up
function tooltip(point,Htm,cla) {
  this.point_ = point;
  this.Htm_ = Htm;
  this.cla_ = cla;
}
tooltip.prototype = new GOverlay();

tooltip.prototype.initialize = function(m) {
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.innerHTML = this.Htm_
  m.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
  this.map_ = m;
  this.div_ = div;
}

tooltip.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

tooltip.prototype.copy = function() {
  return new tooltip(this.point_,this.Htm_);
}

tooltip.prototype.redraw = function(force) {
  if (!force) return;
  var c1 = this.map_.fromLatLngToDivPixel(this.point_);
  this.div_.className = this.cla_;
  this.div_.style.left = c1.x+13+"px";
  this.div_.style.top = c1.y+13+"px";
}
//]]>
</script> 

</head>
<body>
	<div id="map"></div>
</body>
</html>